<template>
  <el-dialog
    :title="detailData.parkingName"
    :visible.sync="flagVisible"
    class="cars-dialog-center"
    @close="close"
    @opened="opened"
    :close-on-click-modal="false"
  >
    <div style="height: 500px"><AMap ref="aMap" :options="options" /></div>
  </el-dialog>
</template>

<script>
import AMap from "@/views/aMap/aMap";
export default {
  props: {
    flagVisible: {
      type: Boolean,
      default: () => false,
    },
    detailData: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      options: {
        mapload: true,
      },
    };
  },
  components: {
    AMap,
  },
  methods: {
    close() {
      this.$refs.aMap.mapDestroy();
      this.$emit("update:flagVisible", false); // {}
    },
    opened() {
      const splitLnglat = this.detailData.lnglat.split(",");
      const lnglat = {
        lng: splitLnglat[0],
        lat: splitLnglat[1],
      };
      this.$refs.aMap.mapCreate();
      this.$refs.aMap.setMarker(lnglat);
    },
  },
};
</script>

<style>
</style>